<template>
  <div class="GreetingCardHome">
    <div class="part-bg">
      <img class="part-bg1" :src="homeBg" alt="" />
    </div>
    <div class="part1" :class="inputDoor === 1 ? 'part1-1' : ''">
      <div class="part11">
        <div class="part111">
          <p class="part111-i noWrap" @click="popBoxDoor = true">{{ ddForm.type || '请选择商户名称' }}</p>
          <u-icon name="arrow-down" color="#808080" size="28"></u-icon>
        </div>
        <div class="part111">
          <input v-model="ddForm.phone" class="part111-i" @focus="inputOffset(1)" @blur="inputOffset(0)" type="number" placeholder="请输入手机号码" :maxlength="11" />
          <u-icon v-if="ddForm.phone" @click="ddForm.phone = ''" name="close" size="30" class="part111-c"></u-icon>
        </div>
        <div class="part111">
          <input v-model="ddForm.code" class="part111-i" @focus="inputOffset(1)" @blur="inputOffset(0)" type="text" placeholder="请输入短信验证码" :maxlength="4" :disabled="!ddForm.key" />
          <span class="part111-t" @click="getMsgCode">{{ msgCodeTxt }}</span>
        </div>
        <div class="part112" @click="sendBtn">
          <u-loading-icon color="#fff" size="25" v-if="loading1"></u-loading-icon>
          <span>立即提交</span>
        </div>
      </div>
    </div>
    <div class="part2" v-if="userinfo.rule" @click="popUpMsg(1, userinfo.rule)">
      <span class="part21">活动规则</span>
    </div>

    <div class="popBox-wrap" v-if="popBoxDoor" @click="popBoxDoor = false">
      <div class="popBox-a" @click.stop>
        <div class="popBox-a-a">
          <div class="popBox-b">
            <input type="text" @input="inputSearch" v-model="popBoxData.type" placeholder="请输入商户名称" />
          </div>
          <div class="popBox-c">
            <div class="popBox-d" v-for="(item, index) in pickerListFix" :key="index" @click="popBoxClick(item, index)" :class="pickerIndex === item.id ? 'popBox-d-on' : ''">
              <p class="popBox-d-b">商户名称：{{ item.type }}</p>
              <p class="popBox-d-a">网点：{{ item.outlets }}</p>
              <p class="popBox-d-c">地址：{{ item.typeName }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <popMsg ref="popMsg" @alertOff="alertOff"></popMsg>
  </div>
</template>

<script>
import popMsg from '../../component/dialog/index1.vue'
import $utils from '../../utils'

export default {
  props: {
    demo: {
      type: String,
      default: '1',
    },
  },
  data() {
    return {
      ddForm: {
        phone: '',
      },
      popBoxDoor: false,
      popBoxData: {},
      pickerListFix: [],
      pickerList: [
        {
          outlets: '官渎里',
          type: '胡姐面馆',
          typeName: '苏州市北环东路21号',
        },
        {
          outlets: '黄埭',
          type: '苏州市相城区黄埭镇德成副食品店',
          typeName: '苏州相城区黄埭镇咏春花园73号',
        },
        {
          outlets: '黄埭',
          type: '永家面馆',
          typeName: '苏州市相城区黄埭镇春丰路27号',
        },
        {
          outlets: '黄埭',
          type: '苏州市相城区黄埭长发食品加盟店',
          typeName: '苏州市相城区黄埭镇春申路98号',
        },
        {
          outlets: '黄埭',
          type: '相城区黄埭镇万豪小吃店',
          typeName: '苏州市相城区黄埭镇潘阳村康阳路西塘桥北堍',
        },
        {
          outlets: '阳澄湖',
          type: '小李家黄焖鸡',
          typeName: '苏州市相城区采莲路720号',
        },
        {
          outlets: '阳澄湖',
          type: '好再来红烧牛肉面',
          typeName: '苏州市相城区阳澄湖镇城中路60号',
        },
        {
          outlets: '阳澄湖',
          type: '陆记饺子馆',
          typeName: '苏州市相城区阳澄湖镇凤阳路252号',
        },
        {
          outlets: '阳澄湖',
          type: '苏州市高铁新城名咖坊咖啡馆',
          typeName: '苏州市高铁北站候车室',
        },
        {
          outlets: '高铁',
          type: '生煎何太急',
          typeName: '苏州高铁新城美好荟外围一楼',
        },
        {
          outlets: '陆慕',
          type: '淮南牛肉汤',
          typeName: '苏州市相城区元和街道齐门北大街745',
        },
        {
          outlets: '黄埭',
          type: '随缘蜡烛店',
          typeName: '苏州市相城区黄埭严家浜2号',
        },
        {
          outlets: '渭塘',
          type: '相城区渭塘珀妮雅美容店',
          typeName: '苏州市相城区渭塘镇渭星街3101号',
        },
        {
          outlets: '渭塘',
          type: '相城区元和亚马迅家具店',
          typeName: '苏州市相城区元和家具大道27号',
        },
        {
          outlets: '渭塘',
          type: '苏州市相城区渭塘左左屋服装店',
          typeName: '苏州市相城区渭塘镇渭星街140号',
        },
        {
          outlets: '渭塘',
          type: '苏州祺胜酒店管理有限公司',
          typeName: '苏州市相城区相城区华元路818号',
        },
        {
          outlets: '渭塘',
          type: '戴桂芬家具店',
          typeName: '苏州市相城区北桥街道永吴路5号',
        },
        {
          outlets: '望亭',
          type: '相城区望亭镇豪门酒店',
          typeName: '苏州市相城区望亭镇光明街299号',
        },
        {
          outlets: '望亭',
          type: '相城区望亭镇隆亭酒店',
          typeName: '苏州市相城区望亭镇马驿路229号',
        },
        {
          outlets: '营业部',
          type: '采莲烧烤',
          typeName: '苏州市相城区泰元路110号',
        },
        {
          outlets: '营业部',
          type: '相城区元和足享人生足浴店',
          typeName: '苏州相城元和街道春申湖中路672号202室',
        },
        {
          outlets: '营业部',
          type: '阳光休闲娱乐城',
          typeName: '苏州市相城区北桥街道美街2号',
        },
        {
          outlets: '营业部',
          type: '相城区高铁新城听花雨轩鲜花店',
          typeName: '苏州市相城区高铁新城吾悦广场1层',
        },
        {
          outlets: '黄埭',
          type: '可爱多潮童',
          typeName: '苏州相城区黄埭镇菜市场二楼',
        },
        {
          outlets: '黄埭',
          type: '相城区黄埭镇农贸市场洪芳小百货',
          typeName: '苏州相城区黄埭镇菜市场二楼',
        },
        {
          outlets: '黄埭',
          type: '兔子杰罗童装店',
          typeName: '苏州市相城区黄埭镇中翔二楼',
        },
        {
          outlets: '黄埭',
          type: '相城区黄埭镇搏丽服饰店',
          typeName: '苏州市相城区黄埭镇中市南路26号',
        },
        {
          outlets: '黄埭',
          type: '苏州市相城区黄埭埭北商行',
          typeName: '苏州相城黄埭镇中市北路93号',
        },
        {
          outlets: '黄埭',
          type: '相城区黄埭皮卡休闲商务宾馆',
          typeName: '苏州相城区 苏州市相城区黄埭镇春申路328号',
        },
        {
          outlets: '黄埭',
          type: '天一超市',
          typeName: '苏州市相城区黄埭镇方桥路',
        },
        {
          outlets: '黄埭',
          type: '相城区黄埭诚年酒汇',
          typeName: '苏州相城黄埭镇中市路93号',
        },
        {
          outlets: '黄埭',
          type: '新浦东',
          typeName: '苏州相城区 黄埭镇春秋路4号',
        },
        {
          outlets: '黄埭',
          type: '黄埭米恩时光果业',
          typeName: '苏州市相城区黄埭镇华阳路21号',
        },
        {
          outlets: '阳澄湖',
          type: '相城区阳澄湖镇隆福旺副食品商行',
          typeName: '苏州市相城区阳澄湖镇圣堂村湘阳路18号',
        },
        {
          outlets: '阳澄湖',
          type: '简汐',
          typeName: '苏州市相城区中翔小商品批发市场二区三楼3516',
        },
        {
          outlets: '阳澄湖',
          type: '阳澄湖凯乐电器商行',
          typeName: '苏州市相城区阳澄湖镇凤阳路262号',
        },
        {
          outlets: '阳澄湖',
          type: '华唐便利店',
          typeName: '苏州市相城区阳澄湖镇沈周村凤阳路204号',
        },
        {
          outlets: '阳澄湖',
          type: '相城阳澄湖度假区鱼米之乡拾捌灶饭店',
          typeName: '苏州相城阳澄湖生态休闲旅游度假区清水村南头港桥168号',
        },
        {
          outlets: '阳澄湖',
          type: '相城区阳澄湖镇尊融美容美发养生店',
          typeName: '苏州市相城区阳澄湖镇湘洲路122号',
        },
        {
          outlets: '阳澄湖',
          type: '心怡副食品店',
          typeName: '苏州市相城区阳澄湖镇凤阳路198号',
        },
        {
          outlets: '高铁',
          type: '佑雅茶行',
          typeName: '苏州高铁新城朗诗蔚蓝邻里广场',
        },
        {
          outlets: '陆慕',
          type: '苏州中翔巴拉巴拉童装店',
          typeName: '苏州市相城区 中翔小商品市场三区2105',
        },
        {
          outlets: '陆慕',
          type: '相城区元和恒中酒业商行',
          typeName: '苏州相城元和街道峰汇园花园一区4幢134室',
        },
        {
          outlets: '陆慕',
          type: '相城区元和陈英河童装店',
          typeName: '苏州相城元和街道相城大道728号中翔商贸城三区2105号',
        },
        {
          outlets: '陆慕',
          type: '相城区元和梵蒂雅缇美容美发店',
          typeName: '苏州相城区 建元路1599号橡树湾花园6幢115室',
        },
        {
          outlets: '陆慕',
          type: '相城区元和艾妮美发商行',
          typeName: '苏州相城区元和街道阳澄湖中路141号',
        },
        {
          outlets: '陆慕',
          type: '相城区元和艾妮美发店',
          typeName: '苏州市相城区元和街道润天路333号海亮香榭时光生活广场二楼2025.2026.2027号',
        },
        {
          outlets: '太平',
          type: '苏州市相城区太平金澄副食品店',
          typeName: '苏州相城区太平街道金澄路农贸市场北门',
        },
        {
          outlets: '太平',
          type: '相城区太平永联羽绒服装商城',
          typeName: '苏州市相城区太平街道金瑞路1号',
        },
        {
          outlets: '太平',
          type: '苏州市相城区渭塘万利商行',
          typeName: '渭中路451号',
        },
        {
          outlets: '太平',
          type: '苏州市相城区太平财发副食品批发部',
          typeName: '苏州市相城区太平兴太路222号',
        },
        {
          outlets: '阳澄湖',
          type: '荷花荡农家乐',
          typeName: '苏州市相城区阳澄湖镇湘洲路77号',
        },
        {
          outlets: '阳澄湖',
          type: '苏州村上湖舍旅游投资合伙企业（有限合伙）',
          typeName: '苏州市相城区阳澄湖澄林路清水村刘家庄',
        },
        {
          outlets: '黄埭',
          type: '苏州市相城区黄埭镇和平食品商行',
          typeName: '苏州市相城区黄埭镇春申路',
        },
        {
          outlets: '黄埭',
          type: '苏州市相城区黄埭嫣然服装店',
          typeName: '苏州市相城区黄埭镇裴阳路4号',
        },
        {
          outlets: '黄埭',
          type: '香烛店',
          typeName: '苏州市相城区春申路农贸市场',
        },
        {
          outlets: '黄埭',
          type: '凭良心油坊',
          typeName: '苏州市相城区黄埭严家浜2号',
        },
        {
          outlets: '黄埭',
          type: '相城区黄埭镇高正华鲜肉摊',
          typeName: '苏州相城区 黄埭农贸市场内',
        },
        {
          outlets: '黄埭',
          type: '吴福良肉摊',
          typeName: '苏州相城区 黄埭镇菜市场内',
        },
        {
          outlets: '黄埭',
          type: '相城区黄埭镇朱延星鲜肉摊',
          typeName: '苏州相城区 黄埭农贸市场B区',
        },
        {
          outlets: '黄埭',
          type: '相城区黄埭于舒舒卤菜店',
          typeName: '苏州相城区黄埭农贸市场内',
        },
        {
          outlets: '黄埭',
          type: '相城区黄埭镇兄弟冷冻食品经营部',
          typeName: '苏州相城区黄埭农贸市场南门西3号',
        },
        {
          outlets: '官渎里',
          type: '姑苏区毕优特富澳百货商行',
          typeName: '苏州市姑苏区虎丘路228号19-101',
        },
        {
          outlets: '官渎里',
          type: '姑苏区优佳铭便利店',
          typeName: '苏州市姑苏区闻钟苑13-101',
        },
        {
          outlets: '黄埭',
          type: '黄埭苏太肉专卖店',
          typeName: '苏州相城区黄埭镇农贸市场内',
        },
        {
          outlets: '黄埭',
          type: '中粮家佳康肉食',
          typeName: '苏州相城区黄埭镇农贸市场内',
        },
        {
          outlets: '黄埭',
          type: '山东老毛水果店',
          typeName: '苏州市相城区黄埭镇裴阳路26号',
        },
        {
          outlets: '黄埭',
          type: '黄埭农贸市场韩记干货调味品',
          typeName: '苏州市相城区黄埭镇农贸市场',
        },
        {
          outlets: '黄埭',
          type: '相城区黄埭镇卢涛大蔬菜摊',
          typeName: '苏州相城区 黄埭农贸市场B区',
        },
        {
          outlets: '黄埭',
          type: '小山东水果店',
          typeName: '苏州市相城区黄埭镇春申路',
        },
        {
          outlets: '渭塘',
          type: '相城区渭塘珀妮雅美容店',
          typeName: '苏州市相城区渭塘镇渭星街3101号',
        },
        {
          outlets: '渭塘',
          type: '相城区元和亚马迅家具店',
          typeName: '苏州市相城区元和家具大道27号',
        },
      ],
      pickerIndex: -1,
      inputDoor: 0,
      loading1: false,
      msgCodeTxt: '获取验证码',
      getMsgDoor: false,
      homeBg: require('./img/bg.jpg'),
    }
  },
  components: {
    popMsg,
  },
  mounted() {
    this.pickerList = this.pickerList.map((v1, index) => {
      v1.id = index
      return v1
    })
    this.pickerListFix = this.pickerList
  },
  computed: {
    userinfo() {
      return this.$store.state.app.userinfo
    },
  },
  methods: {
    inputSearch() {
      let str = this.popBoxData.type.trim()
      this.pickerListFix = this.pickerList.filter((v1) => {
        return v1.type.includes(str)
      })
    },
    popBoxClick(i) {
      this.popBoxData = JSON.parse(JSON.stringify(i))
      Object.assign(this.ddForm, i)
      this.pickerIndex = i.id
      this.popBoxDoor = false
    },
    popUpMsg(i, j, k) {
      this.$refs.popMsg.popUpMsg(i, j, k)
    },
    alertOff(i) {
      // if (i === 6) {
      //   this.$parent.pageSwichBtn(2)
      // }
    },
    sendBtn() {
      if (!this.ddForm.type) {
        uni.showToast({
          icon: 'error',
          title: '请选择',
        })
        return
      }

      if (!this.ddForm.code) {
        uni.showToast({
          icon: 'error',
          title: '请输入验证码',
        })
        return
      }

      if (this.loading1) return
      this.loading1 = true

      this.ddForm.openId = localStorage.user
      this.getMsgDoor = false
      this.$api.bussinessApi
        .getActivityMoney(this.ddForm)
        .then((res) => {
          this.loading1 = false
          this.popUpMsg(9, '提交成功', true)
        })
        .catch((err) => {
          this.loading1 = false
          if (err.msg) {
            this.popUpMsg(9, err.msg)
          } else {
            this.popUpMsg(5)
          }
        })
    },
    inputOffset(i) {
      this.inputDoor = i
      this.$bus.$emit('tabBarShow', i)
    },
    sendCode1() {
      let send = {
        phone: this.ddForm.phone,
      }
      if (this.userinfo.type == 1) {
        send.secret = this.ddForm.phone
      } else {
        send.secret = this.ddForm.secret
      }
      this.$api.bussinessApi
        .sendCode(send)
        .then((res) => {
          uni.showToast({
            icon: 'success',
            title: '发送成功',
          })
          this.ddForm.key = res.data
        })
        .catch((err) => {
          this.getMsgDoor = false
          if (err.msg) {
            this.popUpMsg(9, err.msg)
          } else {
            this.popUpMsg(5)
          }
        })
    },
    getMsgCode1() {
      if (this.getMsgDoor) return
      this.getMsgDoor = true
      this.sendCode1()
      let num = 60
      let _this = this
      function loop() {
        if (num > 0) {
          num = num - 1
          _this.msgCodeTxt = num + 's'
          setTimeout(() => {
            if (!_this.getMsgDoor) {
              num = 0
            }
            loop()
          }, 1000)
        } else {
          _this.getMsgDoor = false
          _this.msgCodeTxt = '获取验证码'
        }
      }
      loop()
    },
    getMsgCode() {
      if (!this.ddForm.phone) {
        uni.showToast({
          icon: 'error',
          title: '请输入手机号',
        })
        return
      }
      let bb = this.ddForm.phone.match(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/g)
      if (!bb) {
        uni.showToast({
          icon: 'error',
          title: '手机号格式错误',
        })
        return
      }

      this.getMsgCode1()
    },
    getCompany() {
      this.$api.bussinessApi
        .getCompany({
          id: $utils.urlQuery('companyId') || window.localStorage.companyId,
        })
        .then((res) => {
          let res1 = res.data
          this.$store.dispatch('app/on_userinfo', res1)
          if (res1.name) {
            document.title = res1.name
          }
          if (res1.dispose.match(/(#|rgb)/g)) {
            document.documentElement.style.setProperty('--main-color', res1.dispose)
          }

          this.homeBg = res1.disable

          let res11 = this.$moment(res1.startTime, 'MM/DD HH:mm:ss')
          let res12 = this.$moment(res1.finishTime, 'MM/DD HH:mm:ss')
          let res21 = parseInt(this.$moment(res1.startTime, 'YYYYMMDDHHmm'))
          let res22 = parseInt(this.$moment(res1.finishTime, 'YYYYMMDDHHmm'))
          let res23 = parseInt(this.$moment(new Date(), 'YYYYMMDDHHmm'))
          if (res23 > res22 || res23 < res21) {
            // 0为上架 1为下架
            if (res1.score == 1) {
              this.popUpMsg(4, {
                // start: res11,
                // end: res12,
                text: '活动已结束，下次赶早哦',
              })
            } else {
              this.popUpMsg(4, {
                // start: res11,
                // end: res12,
                text: '不在活动时间范围内，请稍后再试',
              })
            }
          } else {
            if (res1.score == 1) {
              this.popUpMsg(4, {
                // start: res11,
                // end: res12,
                text: '活动暂未开始，请稍后再试',
              })
            }
          }
        })
        .catch(() => {
          this.$parent.pageLoad(true, '活动不存在')
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.GreetingCardHome {
  position: relative;
  .noWrap {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .popBox-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    .popBox-a {
      background: #fff;
      border-radius: 40rpx 40rpx 0 0;
      width: 100%;
    }
    .popBox-a-a {
      padding: 30rpx;
    }
    .popBox-b {
      border-radius: 16rpx;
      border: 1px solid #d7d7d7;
      padding: 20rpx;
    }
    .popBox-c {
      height: 60vh;
      overflow: hidden;
      overflow-y: auto;
    }
    .popBox-d {
      background: #eee;
      margin-top: 20rpx;
      padding: 20rpx;
      font-size: 26rpx;
      color: #555;
    }
    .popBox-d-b {
      font-size: 28rpx;
      color: #222;
    }
    .popBox-d-a {
      padding: 10rpx 0;
    }
    .popBox-d-on {
      background: var(--main-color);
      color: #ddd;
      .popBox-d-b {
        color: #fff;
      }
    }
  }
  .part-bg {
    font-size: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    // background: url('./img/a6.png') 0 100% no-repeat;
    // background-size: 100% 468rpx;
    // background-color: #c7000b;
    .part-bg1 {
      width: 100%;
    }
  }
  .part1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: all 0.3s;
    padding-top: 50vh;
    .part11 {
      width: 630rpx;
      margin: 0 auto;
      background: #fff;
      border-radius: 16rpx;
      padding: 40rpx 30rpx 50rpx;
      box-shadow: 0px 0px 30rpx 0px rgba(255, 195, 40, 0.22);
      .part111 {
        display: flex;
        align-items: center;
        border: 2rpx solid rgba(193, 193, 193, 0.3);
        border-radius: 8rpx;
        margin-bottom: 30rpx;
        padding: 0 30rpx;
        position: relative;
        .part111-c {
          position: absolute;
          right: 20rpx;
          top: 50%;
          padding: 20rpx;
          transform: translateY(-50%);
        }
        .part111-icon {
          margin-right: 30rpx;
        }
        .part111-i {
          flex: 1;
          height: 90rpx;
          line-height: 90rpx;
          font-size: 28rpx;
        }
        .part111-t {
          color: var(--main-color);
          margin-left: 30rpx;
          font-size: 28rpx;
          line-height: 90rpx;
        }
      }
      .part112 {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: 50rpx;
        height: 100rpx;
        background: var(--main-color);
        border-radius: 8rpx;
        color: #fff;
        font-size: 34rpx;
        line-height: 34rpx;
      }
    }
  }
  .part1-1 {
    padding-top: 40vh;
  }
  .part2 {
    position: fixed;
    top: 20%;
    right: 0;
    z-index: 10;
    width: 50rpx;
    height: 162rpx;
    background: var(--main-color);
    border-radius: 12px 0px 0px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    .part21 {
      color: #fff;
      width: 24rpx;
      font-size: 24rpx;
      line-height: 33rpx;
      padding-left: 4rpx;
      display: inline-block;
    }
  }
}
</style>
